<template>
	<u-popup v-model="show" mode="center" width="80%" border-radius="36">
		<view class="popContent">
			<view class="content text-dark font-lg mb-3 text-center" v-if="title">{{ title }}</view>
			<view class="content text-dark font" :class="'text-' + alginText" v-if="text">{{ text }}</view>
			<slot></slot>
			<!-- btn -->
			<view class="flex align-center justify-evenly btn">
				<template v-if="isClose">
					<view class="close" @click="close">{{ colseText }}</view>
					<!-- 中间间隔条 -->
					<view class="line"></view>
				</template>
				<view class="text-success ok" @click="confim">{{ sureText }}</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
/**
 * popup 弹窗组件
 * @description 本组件用于榴莲小程序弹窗组件。
 * @property {String} alginText 提示内容的文字方向，传入参数left，center，right
 * @property {String，Boolean} title 弹窗提示标题，参数为true or 字符串显示，传入false隐藏标题
 * @property {String} text 提示内容，传入字符串，不传入不显示内容，配合solt使用，自定义内容
 * @property {Boolean} isClose 是否显示取消按钮
 * @property {String} colseText 取消位置的文字显示
 * @property {String} sureText 确认位置的文字显示
 */
export default {
	props: {
		//文字方向
		alginText: {
			type: String,
			default: 'center'
		},
		//提示标题
		title: {
			type: [String, Boolean],
			default: '提示'
		},
		//提示文字
		text: {
			type: String,
			default: ''
		},
		//是否显示取消按钮
		isClose: {
			type: Boolean,
			default: true
		},
		//弹窗取消文字
		colseText: {
			type: String,
			default: '取消'
		},
		//弹窗确认
		sureText: {
			type: String,
			default: '确认'
		}
	},
	data() {
		return {
			show: false
		};
	},
	mounted() {},
	methods: {
		hide() {
			this.show = false;
		},
		open() {
			this.show = true;
		},
		confim() {
			this.show = false;
			this.$emit('confim');
		},
		close() {
			this.show = false;
			this.$emit('close');
		}
	}
};
</script>

<style scoped lang="scss">
.popContent {
	padding: 80rpx 40rpx 50rpx 40rpx;

	.content {
		font-weight: 600;
	}

	.line {
		width: 2rpx;
		height: 44rpx;
		background-color: #e0e5f7;
	}

	.btn {
		margin-top: 100rpx;
	}

	.close {
		font-size: 30rpx;
		color: #8d9cbf;
	}

	.ok {
		font-size: 30rpx;
	}
}
</style>
